/* pages/find/index.wxss */
@import "../../commin/commin.less";

page {
    background-color: #F4F6F8;
    padding-bottom: 200rpx;
}
.nav-header{
    position: fixed;
    top: 0rpx;
    left: 0;
    z-index: 9;
    background-color: #fff;
    height: 90rpx;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .item{
        color: #909399;
        font-size: 28rpx;
        font-weight: 500;
    }
    .active{
        color: var(--textColor);
    }
}
.head {
    // width: 702rpx;
	// height: 100vh;
	box-sizing: border-box;
    .margins(24rpx, 24rpx, 24rpx, 24rpx);
    .paddings(40rpx, 33rpx, 40rpx, 33rpx);
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    .borders(2rpx, #FFFFFF);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);

    .head-tab {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .txt {
            .fontsize(34rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color1;
        }

        .head-image {
            .kuangao(37rpx, 35rpx);
        }
    }

    .activity {
        display: flex;
        padding: 24rpx 0;
        border-top: 1rpx solid #DCDFE6;

        .img {
            .kuangao(242rpx, 182rpx);
            border-radius: 8rpx;
        }

        .info {
            width: 368rpx;
            margin-left: 24rpx
        }

        .title {
            .fontsize(34rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: #18181A;
            .yiman(1);
        }

        .tagTxt {
            display: flex;

            .tag {
                background: rgba(247, 161, 74, 0.1);
                .borders(1rpx, #F7A14A);
                .margins(12rpx, 10rpx, 14rpx, 0rpx);
                border-radius: 20rpx;
                .paddings(5rpx, 23rpx, 5rpx, 17rpx);
                text-align: center;
                .fontsize(22rpx);
                font-family: PingFang SC;
                font-weight: 400;
                color: @yellow;
            }
        }

        .detail {
            .fontsize(22rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: #18181A;
            .yiman(2);
            p{
                .yiman(1);
                width: 10%;
            }
            .imgs{
                width: 100%;
                display:block;
            }
        }

        .fotData {
            .fontsize(22rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: @text-color4;
            margin-top: 18rpx;
        }
    }
}

.filtrate {
    .category_title {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: bold;
        .paddings(39rpx, 31rpx, 34rpx, 31rpx);
        color: @text-color2;
        display: flex;
        justify-content: space-between;

        .showall {
            .kuangao(150rpx, 60rpx);
            .fontsize(24rpx);
            .textalign();
            border-radius: 44rpx;
            line-height: 60rpx;
            font-family: PingFang SC;
            font-weight: bold;
            background: linear-gradient(105deg, #2B99FF, #1B8CF5);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
            color: #fff;
            margin-left: 12rpx;
        }
    }

    .category_body {
        .gao(397rpx);
        display: flex;
        overflow: auto;
        background-color: @text-color6;

        .categoryList_wrap {
            flex: 1;

            .categoryList {
                background-color: @text-color6;

                .category-list-item {
                    .gao(64rpx);
                    .textalign();
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 64rpx;
                    color: @text-color3;

                }

                .active {
                    .gao(64rpx);
                    flex: 1;
                    background: @white-color;
                    .textalign();
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 64rpx;
                    color: @blue;
                }
            }
        }

        .categoryItemList_wrap {
            flex: 1;

            .categoryItemList {
                background-color: #FAFBFC;
                display: flex;
                justify-content: center;
                align-items: center;

                .categoryItemList-item {
                    .gao(64rpx);
                    .textalign();
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 64rpx;
                    color: @text-color3;
                }

                .active {
                    .gao(64rpx);
                    .textalign();
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 64rpx;
                    color: @blue;
                }

                .noactive {
                    margin-left: -65rpx;
                }

                .itemSelect {
                    .kuangao(28rpx, 28rpx);
                    margin-left: 40rpx;
                }
            }
        }
    }

    .filtrate-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 83rpx;
        margin-bottom: 33rpx;

        .filtrate-cancel,
        .filtrate-confirm {
            .kuangao(270rpx, 88rpx);
            .fontsize(30rpx);
            .textalign();
            border-radius: 44rpx;
            line-height: 88rpx;
            font-family: PingFang SC;
            font-weight: bold;
        }

        .filtrate-cancel {
            .borders(1px, @text-color4);
            color: @text-color4;
            margin-right: 12rpx;
        }

        .filtrate-confirm {
            // background: linear-gradient(105deg, #2B99FF, #1B8CF5);
            background: var(--btnColor);
            box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
            color: @white-color;
            margin-left: 12rpx;
        }
    }


}

.list-box{
    .item-box{
        width: 702rpx;
        padding-bottom: 20rpx;
        margin: 18rpx auto;
        background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
        border: 2rpx solid #FFFFFF;
        box-shadow: 4rpx 7rpx 20rpx 0px rgba(166,171,179,0.24);
        border-radius: 16rpx;
        position: relative;
        overflow: hidden;
        .img{
            width: 100%;
            height: 247rpx;
        }
        .select{
            width: 107rpx;
            height: 111rpx;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .content{
            margin-top: 30rpx;
            margin-left: 30rpx;
            font-size: 22rpx;
            font-weight: 500;
            color: #606266;
        }
        .time{
            font-size: 22rpx;
            color: #909399;
            margin-top: 22rpx;
            margin-left: 30rpx;
        }
    }
}
